<template>
  <div class="my-custiom">
      <div class="my-custiom-content">
          <div class="my-custiom-title">
              系统操作日志
          </div>
          <div class="my-custiom-content-text">
              <div class="my-custiom-content-header">
                  <div class="text-column">操作人</div>
                  <div class="text-column">操作时间</div>
                  <div class="text-column">操作内容</div>
              </div>
              <div v-for="item in reception.content" :key="item.value" class="my-custiom-content-text-item">
                  <div class="text-column username">{{ item.data.userName }}</div>
                  <div class="text-column timestamp">{{ item.data.actionTime }}</div>
                  <div class="text-column action">{{ item.data.czAction }}{{ item.data.formName }}</div>
              </div>
          </div>
      </div>
      <div class="pagination-container">
              <a-pagination v-model:current="pageNum" :total="reception.totalElements" :page-size="pageSize"
                  :show-size-changer="false" @change="handlePageChange" />
      </div>
  </div>
</template>

<script lang="ts">
.33




// 定义组件
import { Component, Vue, Prop } from 'vue-property-decorator';
import Api from '../../api/api';
@Component
export default class TestPage extends Vue {
  reception: any = []//接收情况统计
  pageNum: number = 1;  // 当前页码
  pageSize: number = 6;  // 每页显示条数
  created() {
      this.fetchReception();
  }
  // 获取数据
  async fetchReception() {
      const res = await Api.exportXtrz({
          filters: [],
          mobile: false,
          page: this.pageNum - 1,
          queryCode: "czjl",
          schemaCode: "czjl",
          size: this.pageSize,
          queryVersion: 1,
          queryCondition: [[[]]],
          showTotal: true
      })
      this.reception = res.data;
      console.log('res', res);
  }



  handlePageChange(page: number) {
      this.pageNum = page;
      this.fetchReception(); // 增加数据加载调用
  }

}


</script>

<style lang="less" scoped>
.my-custiom {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;

}

.my-custiom-content {
  padding: 20px;
  height: 100%;
  position: relative;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;  
}
.my-custiom-content-text{
  margin-top: -10px;
}
.my-custiom-title {
  font-size: 17px;
  font-weight: bold;
  margin-bottom: 16px;
  color: black;
  position: relative;
  &::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #ccc;
}
}

.my-custiom-content-text {
  font-size: 15px;
  color: black;
  padding: 5px;
  flex: 1;
  min-height: 160px;
  height: calc(100% - 40px); 
  margin-bottom: 60px;       

  .my-custiom-content-header {
      display: flex;
      justify-content: space-between;
      padding: 8px 12px;
      margin-bottom: 8px;
      background: #f0f2f5;
      border-radius: 4px;
      font-weight: bold;
      
      .text-column {
          flex: 1;
          min-width: 0;
          padding: 0 8px;
          &:nth-child(1) { flex: 0 0 30% }
          &:nth-child(2) { flex: 0 0 40% }
          &:nth-child(3) { flex: 0 0 30% }
      }
  }




}

.my-custiom-content-text-item {
  display: flex;
  justify-content: space-between; // 改为两端对齐
  margin-bottom: 12px;
  padding: 8px 12px;
  background: #f8f9fa;
  border-radius: 4px;

  .text-column {
      flex: 1;
      min-width: 0; // 防止内容溢出
      padding: 0 8px;

      &:nth-child(1) {
          flex: 0 0 30%;
      }

      // 用户名列固定30%
      &:nth-child(2) {
          flex: 0 0 40%;
      }

      // 时间列固定40%
      &:nth-child(3) {
          flex: 0 0 30%;
      }
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
  }

  .timestamp {
      color: #666;
      font-size: 14px;
  }

  .action {
      font-weight: 500;
  }
}

.pagination-container {
  flex-shrink: 0;    // 新增防止压缩
  text-align: right;
  margin-top: auto;
  position: absolute;
  bottom: auto;
  right: auto;
  // background: white;
  padding: 8px 16px;
  // border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: relative;

  ::v-deep .ant-pagination-item {
      border-radius: 4px;

      &:hover {
          background: #f0f7ff;
      }
  }
}
</style>